<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台管理系统</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		html,body,.main{
			width: 100%;
			height: 100%;
		}
		.top{
			box-sizing: border-box;
			width: 100%;
			height: 70px;
			background-color: teal;
			font-size: 30px;
			color: #fff;
			line-height: 70px;
			padding-left: 10px;
		}
		.bottom{
			width: 100%;
			height: calc(100% - 70px);
			/*background-color: lightblue;*/
		}
		.bottom-left{
			width:  170px;
			height: 100%;
			background-color: pink;
			float: left;
		}
		.bottom-right{
			width: calc(100% - 170px);
			height: 100%;
			background-color: #eee;
			float: left;
		}
		.user{
			width: 15%;
			height: 70px;
			/*background-color: red;*/
			float: right;
			font-size: 20px;
		}
		img{
			float: left;
			margin-top: 10px;
		}
		.bottom-left li{
			list-style: none;
			width: 100%;
			height: 50px;
			background-color: teal;
			border-top: 1px solid #eee;
			color: #fff;
			font-size: 18px;
			text-align: center;
			line-height: 50px;
			cursor: pointer;
		}
		.bottom-left li:hover{
			color: yellow;
		}
		.content{
			width: 98%;
			height: 95%;
			background-color: #fff;
			margin-left: 1%;
			margin-top: 1%;
			border-radius: 10px;
		}
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- 将自己创建的js引入 记住 一定要在jQuery后引入 否则在js文件中无法使用jQuery -->
  <script src="./js/index.js"></script>
  <!-- 导入config.js -->
  <script src="./js/config.js"></script>
	<script>
		$(function(){
      // 首次进入页面的时候 默认选中用户管理 显示用户管理界面
      $('ul li:first').trigger('click')
		})
	</script>
</head>
<body>
	<div class="main">
		<div class="top">
			<span>看点资讯管理系统</span>
			<div class="user">
				<span>用户名：张三</span>
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-left">
				<ul>
					<li>用户管理</li>
					<li>资讯管理</li>
					<li>栏目管理</li>
					<li>评论管理</li>
				</ul>
      </div>
      <!-- 处理点击对应的栏目跳转到对应的界面 -->
			<div class="bottom-right">
				<div class="content">

        </div>
			</div>
		</div>
	</div>
</body>
</html>